<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import {
    login
} from "../api/user";

const router = useRouter()

const form = reactive({
    username: '',
    password: '',
    userStyle: 0
})

const onSubmit = () => {
    if (form.username == '' || form.password == '') {
        alert('账号和密码不能为空')
    } else {
        login({
            userName: form.username,
            userPassword: form.password,
            userType: form.userStyle
        }).then(res => {
            // console.log(res)
            if (res.message === '用户不存在或密码错误') {
                alert('用户不存在或密码错误', 'error')
            } else if (res.message === "密码错误") {
                alert('密码错误', 'error')
            } else if (res.message === '类型不匹配') {
                alert('类型不匹配', 'error')
            } else if (res.message === 'success') {
                alert("登陆成功")
                // router.push('/task')
                const id=res.data
                router.push({ path: '/task', query: { id }})
            }
        })
    }

}
</script>

<template>
    <div class="login">
        <div>
            <h1>登录</h1>
            <div class="username">
                <input type="text" placeholder="请输入账号" v-model="form.username">
            </div>
            <div>
                <input type="text" placeholder="请输入密码" v-model="form.password">
            </div>
            <div class="btn">
                <button @click="onSubmit">登录</button>
            </div>
        </div>

    </div>
</template>

<style scoped>
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.username {
    margin-bottom: 10px;
}

.btn {
    margin-top: 20px;
}
</style>
